<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>Network重发请求演示</title>
</head>

<body>
    <h3>请打开控制台的Network面板查看效果</h3>
    <button onclick="sendFetchRequest()">Fetch发送请求</button>
    <button onclick="sendAjaxRequest()">Ajax发送请求</button>
    <p>在Network面板中可以：</p>
    <ul>
        <li>1. 右键请求 -> Replay XHR 重发请求</li>
        <li>2. 右键请求 -> Copy -> Copy as fetch 复制请求代码</li>
    </ul>

    <script>
        function sendRequest() {
            fetch('https://jsonplaceholder.typicode.com/todos/1', {
                method: 'GET',
                headers: {
                    'X-Custom-Header': 'demo-header',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log('收到响应:', data);
            })
            .catch(error => {
                console.error('请求出错:', error);
            });
        }

        function sendFetchRequest() {
            fetch('https://jsonplaceholder.typicode.com/todos/1', {
                method: 'GET',
                headers: {
                    'X-Custom-Header': 'demo-header',
                    'Content-Type': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                console.log('Fetch收到响应:', data);
            })
            .catch(error => {
                console.error('Fetch请求出错:', error);
            });
        }

        function sendAjaxRequest() {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true);
            
            xhr.setRequestHeader('X-Custom-Header', 'demo-header');
            xhr.setRequestHeader('Content-Type', 'application/json');
            
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        console.log('Ajax收到响应:', JSON.parse(xhr.responseText));
                    } else {
                        console.error('Ajax请求出错:', xhr.statusText);
                    }
                }
            };
            
            xhr.send();
        }
    </script>
</body>

</html> 